<template>
    <el-dialog v-model="dialogFormVisible" :title="title" @close="closeDialog">
        <el-form :model="addRepairSetForm" ref="addRepairSetRef" :rules="addRepairSetrules">
                        <el-form-item label="接单方式：自由、管理员派单、报修员指定" :label-width="formLabelWidth"
                                      prop="receivingMethod" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.receivingMethod"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写接单方式：自由、管理员派单、报修员指定"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="评价结单、维修完成结单 " :label-width="formLabelWidth"
                                      prop="endMethod" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.endMethod"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写评价结单、维修完成结单 "
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示报修级别：是、否" :label-width="formLabelWidth"
                                      prop="displayRepairLevel" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.displayRepairLevel"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示报修级别：是、否"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示报修类型：是、否" :label-width="formLabelWidth"
                                      prop="displayRepairType" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.displayRepairType"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示报修类型：是、否"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="1、填写地址 2选择地址" :label-width="formLabelWidth"
                                      prop="addressMethod" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.addressMethod"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写1、填写地址 2选择地址"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示部门" :label-width="formLabelWidth"
                                      prop="displayDepartment" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.displayDepartment"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示部门"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示电话" :label-width="formLabelWidth"
                                      prop="showPhone" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.showPhone"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示电话"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示报修人" :label-width="formLabelWidth"
                                      prop="showName" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.showName"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示报修人"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否填写地址" :label-width="formLabelWidth"
                                      prop="fillDescription" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.fillDescription"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否填写地址"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否上传图片" :label-width="formLabelWidth"
                                      prop="dispalyPictures" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.dispalyPictures"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否上传图片"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="维修后是否填写耗材" :label-width="formLabelWidth"
                                      prop="fillConsumables" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.fillConsumables"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写维修后是否填写耗材"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否上传维修图片" :label-width="formLabelWidth"
                                      prop="uploadMaintenancePicture" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.uploadMaintenancePicture"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否上传维修图片"
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="是否显示备注" :label-width="formLabelWidth"
                                      prop="showComments" v-if="addRepairSetForm.id">
                            <el-input
                                    v-model="addRepairSetForm.showComments"
                                    autocomplete="off"
                                    ref="name"
                                    placeholder="请填写是否显示备注"
                            ></el-input>
                        </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel()">取消</el-button>
        <el-button type="primary" @click="save()">保存</el-button>
      </span>
        </template>
    </el-dialog>
</template>

<script>
    import {ref} from "vue";
    import {httpService} from "@/utils/httpService";
    import {ElMessage, ElForm} from "element-plus";
    import {vxRule} from "@/utils/validator";

    export default {
        name: "AddRepairSet",
        components: {ElForm, ElMessage},
        data() {
            return {
                dialogFormVisible: ref(false),
                formLabelWidth: "120px",
                title: "",
                personnelType: "",
                addRepairSetForm: {
                    receivingMethod: "",
                    endMethod: "",
                    displayRepairLevel: "",
                    displayRepairType: "",
                    addressMethod: "",
                    displayDepartment: "",
                    showPhone: "",
                    showName: "",
                    fillDescription: "",
                    dispalyPictures: "",
                    fillConsumables: "",
                    uploadMaintenancePicture: "",
                    showComments: "",
                },
                // 校验规则
                addRepairSetrules: {
                },
            };
        },
        methods: {
            closeDialog() {
                this.clear();
            },
            cancel() {
                this.dialogFormVisible = false;
                this.clear();
            },
            getRepairSetById(id) {
                httpService("/javaApi/repairSet/queryById", {id: id}, "get").then(
                    (data) => {
                        this.addRepairSetForm = data;
                    }
                );
            },
            clear() {
                this.dialogFormVisible = false;
                //清空form
                    this.addRepairSetForm.id = "";
                    this.addRepairSetForm.receivingMethod = "";
                    this.addRepairSetForm.endMethod = "";
                    this.addRepairSetForm.displayRepairLevel = "";
                    this.addRepairSetForm.displayRepairType = "";
                    this.addRepairSetForm.addressMethod = "";
                    this.addRepairSetForm.displayDepartment = "";
                    this.addRepairSetForm.showPhone = "";
                    this.addRepairSetForm.showName = "";
                    this.addRepairSetForm.fillDescription = "";
                    this.addRepairSetForm.dispalyPictures = "";
                    this.addRepairSetForm.fillConsumables = "";
                    this.addRepairSetForm.uploadMaintenancePicture = "";
                    this.addRepairSetForm.showComments = "";
            },
            save() {
                this.$refs.addRepairSetRef.validate((valid) => {
                    if (valid) {
                        let params = new FormData(); //创建一个form对象,必须是form对象否则后端接受不到数据
                        params.append("receivingMethod", this.addRepairSetForm.receivingMethod);
                        params.append("endMethod", this.addRepairSetForm.endMethod);
                        params.append("displayRepairLevel", this.addRepairSetForm.displayRepairLevel);
                        params.append("displayRepairType", this.addRepairSetForm.displayRepairType);
                        params.append("addressMethod", this.addRepairSetForm.addressMethod);
                        params.append("displayDepartment", this.addRepairSetForm.displayDepartment);
                        params.append("showPhone", this.addRepairSetForm.showPhone);
                        params.append("showName", this.addRepairSetForm.showName);
                        params.append("fillDescription", this.addRepairSetForm.fillDescription);
                        params.append("dispalyPictures", this.addRepairSetForm.dispalyPictures);
                        params.append("fillConsumables", this.addRepairSetForm.fillConsumables);
                        params.append("uploadMaintenancePicture", this.addRepairSetForm.uploadMaintenancePicture);
                        params.append("showComments", this.addRepairSetForm.showComments);
                        if (this.addRepairSetForm.id) {
                            params.append("id", this.addRepairSetForm.id);
                            httpService("/javaApi/repairSet/edit", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("修改成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getRepairSetList();
                                    } else {
                                        ElMessage.error("修改失败");
                                    }
                                }
                            );
                        } else {
                            httpService("/javaApi/repairSet/add", params, "post").then(
                                (data) => {
                                    if (data.code == 200) {
                                        ElMessage.success("添加成功");
                                        this.clear();
                                        //刷新父组件的数据
                                        this.$parent.getRepairSetList();
                                    } else {
                                        ElMessage.error("添加失败");
                                    }
                                }
                            );
                        }
                    } else {
                        return false;
                    }
                });
            },
        },
    };
</script>
<style>
</style>